<template>
  <div>
    <el-row>
      <el-form :model="queryParam" ref="queryParam" :inline="true" class="demo-form-inline">
        <el-form-item label="分销人类别" prop="idDoctor">
          <el-select v-model="queryParam.idDoctor" placeholder="请选择">
            <el-option key="true" label="医生" value="true"></el-option>
            <el-option key="false" label="分销商" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="queryParam.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input placeholder="电话" v-model="queryParam.tel"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParam.status" placeholder="请选择">
            <el-option key="未付款" label="未付款" value="1"></el-option>
            <el-option key="已付款" label="已付款" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button @click="resetForm('queryParam')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%;"
              row-key="id"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column label="名字" width="180" prop="name"></el-table-column>
              <el-table-column label="用户类型" width="120" prop="userType">
                <template slot-scope="scope">{{scope.row.doctorId?'医生':'分销商'}}</template>
              </el-table-column>
              <el-table-column label="手机" width="180" prop="tel"></el-table-column>
              <el-table-column label="提取类型" width="120" prop="payType">
                <template slot-scope="scope">
                  {{scope.row.payType==1?'微信':''}}
                  {{scope.row.payType==2?'银行卡':''}}
                </template>
              </el-table-column>
              <el-table-column label="微信号" width="180" prop="wexinNo"></el-table-column>
              <el-table-column label="状态" width="120" prop="status">
                <template slot-scope="scope">
                  {{scope.row.status==1?'未付款':''}}
                  {{scope.row.status==2?'已付款':''}}
                </template>
              </el-table-column>
              <el-table-column label="交易号" width="180" prop="transctionNo"></el-table-column>
              <el-table-column label="银行卡号" width="180" prop="bankNo"></el-table-column>
              <el-table-column label="银行名字" width="180" prop="bankName"></el-table-column>
              <el-table-column label="持卡人" width="120" prop="bankCardOwer"></el-table-column>
              <el-table-column label="提取金额" width="100" prop="amount"></el-table-column>
              <el-table-column label="支付时间" width="180" prop="payDate"></el-table-column>
              <el-table-column label="支付人" width="180" prop="payerName"></el-table-column>
              <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                  <el-button type="warning" size="small" @click="detailDialog(scope.row.id)">提 取</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <drawCashEdit v-bind:visible.sync="dialogDrawCashEdit" ref="drawCashEdit" @success="getList"></drawCashEdit>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import drawCashEdit from "@/views/doctor/drawCashEdit.vue";
export default {
  components: { drawCashEdit },
  data() {
    return {
      dialog: {
        title: "佣金提取",
        visible: false
      },
      formLabelWidth: "100px",
      list: [],
      rules: {},
      queryParam: {
        idDoctor: "",
        name: "",
        tel: "",
        date: "",
        status: null
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      loading: false,
      dialogDrawCashEdit: false
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    detailDialog(id) {
      this.dialogDrawCashEdit = true;
      this.$refs.drawCashEdit.initEdit(id, "drawCash");
    },
    getList() {
      this.$https
        .get("/finance/pageCash", {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          idDoctor: this.queryParam.idDoctor,
          name: this.queryParam.name,
          tel: this.queryParam.tel,
          status: this.queryParam.status
        })
        .then(res => {
          this.list = res.data.data.list;
          this.page.total = Number.parseInt(res.data.data.total);
          this.page.currentPage = res.data.data.pageNum;
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="less"></style>
